<template>

  <div class="bg-color-black">
    <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
      <div class="d-flex">
        <span class="fs-xl text mx-2">数据统计图</span>
      </div>
    </div>
    <div>
      <div class="bar1" ref="bar1"></div>
    </div>
  </div>
  <!--
  <div id="pie-container">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        &lt;!&ndash; <icon name="chart-bar"></icon> &ndash;&gt;
      </span>
      <div class="d-flex">
        &lt;!&ndash; <span class="fs-xl text mx-2">附着物统计图</span>
         <dv-decoration-6 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />&ndash;&gt;



      </div>
    </div>
  </div>-->
</template>

<script>
export default {
  name: 'bar1',
  props: {
    supervisedata: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {

      let bar1 = this.$echarts.init(this.$refs.bar1);
      /*let scaleData = [
         /!* { 'name': '藕田', 'value': 19 },
          { 'name': '荷花', 'value': 24 },
          { 'name': '睡莲', 'value': 15 },
          { 'name': '其他', 'value': 10 }*!/

        ];
      this.fzwdata.forEach(item=>{
        scaleData.push({ 'name': item.cropName, 'value': item.area });
      })
        let rich = {
        white: {
            color: '#ddd',
            align: 'center',
            padding: [5, 0]
        }
        };
        let placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
        };
        let data = [];
        for (let i = 0; i < scaleData.length; i++) {
        data.push({
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 30,
                    borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: '#7777eb'
                    }, {
                        offset: 1,
                        // color: '#70ffac'
                        color: '#b6b364'
                    }]),
                    shadowColor: 'rgba(142, 152, 241, 0.6)'
                }
            }
        }, {
            value: 4,
            name: '',
            itemStyle: placeHolderStyle
        });
        }
        let seriesObj = [{
        name: '',
        type: 'bar',
        clockWise: false,
        radius: [95, 100],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                        let percent = 0;
                        let total = 0;
                        for (let i = 0; i < scaleData.length; i++) {
                            total += scaleData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if(params.name !== '') {
                            return params.name + '\n{white|' + '占比' + percent + '%}';
                        }else {
                            return '';
                        }
                    },
                    rich: rich
                },
                labelLine: {
                    show: false
                }
            }
        },
        data: data
        }];
        let option = {
        // backgroundColor: '#04243E',
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesObj
        }*/

     /* let data = [
        {name: 'item1', value: 10},
        {name: 'item1', value: 25},
        {name: 'item1', value: 14},
        {name: 'item1', value: 36},
        {name: 'item1', value: 23},
      ];
      let color = '#fff';
      let xAxisData = [];
      let seriesData = [];
      let topData = [];
      let botData = [];
      let sum = 0;
      let barTopColors = ['#B87757', '#2682B5', '#d6da36', '#5fb381', '#d37070'];
      let barBotColors = ['#FF7D34', '#2BB8F7', '#FAFF1D', '#5BF299', '#ec6565'];

      data.map((item) => {
        xAxisData.push(item.name);
        seriesData.push(item.value);
        sum += item.value;
      });
      data.map(it => {
        topData.push(sum);
        botData.push(1);
      });

      let option = {
        backgroundColor: color == '#fff' ? '#000' : '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params, ticket, callback) {
            const item = params[2];
            return item.name + ' : ' + item.value;
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        title: {
          text: '🍳 家庭2021年收入支出统计',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#FF0066',
          }
        },

        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLabel: {
            show: true,
            margin: 10,
            interval: 0,
            textStyle: {
              color: color,
              lineHeight: 18,
            },
            formatter: function (val) {
              let strs = val.split('');
              let str = '';
              for (let i = 0, s; (s = strs[i++]);) {
                str += s;
                if (!(i % 5)) str += '\n';
              }
              return str;
            },
          },
          interval: 0,
        },
        yAxis: {
          // name: "面积：㎡",
          nameTextStyle: {
            color: color,
            fontSize: 12,
          },
          splitLine: {
            show: color == '#fff' ? false : true,
            lineStyle: {
              color: color,
              opacity: 0.1,
            },
          },
          axisTick: {
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLine: {
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: color,
            },
          },
          splitNumber: 3,
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 16,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColors[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
              fontWeight: 'bold',
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barBotColors[params.dataIndex];
                  },
                },
              },
              formatter: function (params, index) {
                return ((params.value / sum) * 100).toFixed(1) + '%';
              },
            },
            symbolPosition: 'end',
            data: seriesData,
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 5],
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
              },
            },
            data: botData,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
                opacity: 0.4,
              },
            },
            z: 11,
            silent: true,
            barWidth: 40,
            barGap: '-100%', // Make series be overlap
            data: seriesData,
          },
          {
            name: '最上层立体圆',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 13,
            itemStyle: {
              normal: {
                color: color == '#fff' ? '#595D78' : '#E5E5E5',
              },
            },
            symbolPosition: 'end',
            data: topData,
          },
          {
            //上部立体柱
            stack: '1',
            type: 'bar',
            z: 9,
            itemStyle: {
              normal: {
                color: color == '#fff' ? 'rgba(255,255,255,.1)' : '#F5F5F5',
              },
            },
            silent: true,
            barWidth: 40,
            barGap: '-100%', // Make series be overlap
            data: topData,
          },
        ],
      };*/




      let yList = [32, 58, 64, 64, 64, 20];
      let maxData = [100, 100, 100, 100, 100, 100];
      let xList = [10, 55, 44, 55, 9, 8];
      let color = ['#CC1CAA', '#8D67FF', '#00FFFF', '#48DE13', '#FFC516', '#DC3E14', '#8E16F8'];
      let xData = xList.map((item, index) => {
        return {
          value: item,
          textStyle: {
            color: color[index],
          },
        };
      });
      let dom = 800;
      let barWidth = dom / 20;
      let colors = [
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FF3FDA',
            },
            {
              offset: 0.5,
              color: '#FF3FDA',
            },
            {
              offset: 0.5,
              color: '#CC1BAA',
            },
            {
              offset: 1,
              color: '#CC1BAA',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#602CFF',
            },
            {
              offset: 0.5,
              color: '#602CFF',
            },
            {
              offset: 0.5,
              color: '#4915E6',
            },
            {
              offset: 1,
              color: '#4915E6',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00FFFF',
            },
            {
              offset: 0.5,
              color: '#00FFFF',
            },
            {
              offset: 0.5,
              color: '#11A6D0',
            },
            {
              offset: 1,
              color: '#11A6D0',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#89FF5E',
            },
            {
              offset: 0.5,
              color: '#89FF5E',
            },
            {
              offset: 0.5,
              color: '#48DD12',
            },
            {
              offset: 1,
              color: '#48DD12',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FFD05C',
            },
            {
              offset: 0.5,
              color: '#FFD05C',
            },
            {
              offset: 0.5,
              color: '#DEA821',
            },
            {
              offset: 1,
              color: '#DEA821',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#FF7853',
            },
            {
              offset: 0.5,
              color: '#FF7853',
            },
            {
              offset: 0.5,
              color: '#DB3E13',
            },
            {
              offset: 1,
              color: '#DB3E13',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#AA48FF',
            },
            {
              offset: 0.5,
              color: '#AA48FF',
            },
            {
              offset: 0.5,
              color: '#8E15F8',
            },
            {
              offset: 1,
              color: '#8E15F8',
            },
          ],
        },
      ];
      let option = {
        backgroundColor: '#010d3a',
        //标题
        title: {
          text: '志愿项目服务时长变化趋势',
          textStyle: {
            color: '#00FFFF',
            fontWeight: '800',
            fontSize: `20`,
          },
          left: 'center',
          top: '5%',
        },
        //提示框

        /**区域位置*/
        //   grid: {
        //       left: '10%',
        //       right: '10%',
        //       top: 80,
        //       bottom: 40,
        //     },
        /**图例大小*/
        //  legend: {
        //   type: 'plain',
        //   left: 0,
        //   top: 20,
        //   itemGap: 20,
        //   itemWidth: 35,
        //   itemHeight: 20
        // },
        //X轴
        xAxis: {
          name: 'X',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, 0, 0, 20],
          },
          data: xData,
          show: true,
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,1)',
              shadowColor: 'rgba(255,255,255,1)',
              shadowOffsetX: '20',
            },
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 25],
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLabel: {
            rotate: -30,
            fontSize: 12,
          },
        },
        yAxis: {
          show: true,
          splitNumber: 4,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          axisLabel: {
            color: '#FFFFFF',
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[params.dataIndex % 7];
                },
              },
            },
            label: {
              show: true,
              position: [barWidth / 2, -(barWidth + 20)],
              color: '#ffffff',
              fontSize: 12,
              fontStyle: 'bold',
              align: 'center',
            },
            data: yList,
          },
          {
            data: maxData,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: barWidth,
            barGap: '-100%',
            zlevel: -1,
          },

          {
            z: 2,
            type: 'pictorialBar',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                color: function (params) {
                  return colors[params.dataIndex % 7];
                },
              },
            },
          },
          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: function (params) {
                  return colors[params.dataIndex % 7].colorStops[0].color;
                },
              },
            },
          },

          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: maxData,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                borderWidth: 0,
                // color: function (params) {
                //     return colors[params.dataIndex % 7].colorStops[0].color;
                // },
              },
            },
          },
        ],
      };


      bar1.setOption(option);
      window.addEventListener("resize", function () {
        bar1.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#bar-container {
  padding: 0.2rem;
  min-width: 2.5rem;
  border-radius: 0.0625rem;

  .text {
    color: #c3cbde;
    font-size: 0.2rem;
  }

  .bar1 {
    padding: 10px 10px;
    /* width: 80%; */
    width: 100%;
    height: 3.75rem;
    z-index: 9;
  }
}
</style>
